<template>
  <q-item tag="label" clickable v-ripple class="items-center full-width">
    <q-icon :name="props.icon" size="2rem" class="q-mr-lg" />
    <q-item-section>
      <q-item-label class="text-subtitle1">{{ props.label }}</q-item-label>
    </q-item-section>
    <q-item-section class="text-right">
      <div>
        <q-toggle
          :model-value="props.modelValue"
          @update:model-value="updateValue"
        />
      </div>
    </q-item-section>
  </q-item>
</template>

<script setup>
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  label: String,
  modelValue: Boolean,
  icon: String,
});
function updateValue(value) {
  emit("update:modelValue", value);
}
</script>
